<template>
  <div class="hello">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="活动区域" prop="day">
        <el-select v-model="form.day" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="px1">
        <el-col :span="2">
          <el-select
            v-model="form.select1"
            placeholder="请选择"
            style="width: 100px"
            prop="select1"
          >
            <el-option  v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="form.type1">
            <el-checkbox-button v-for="item in 12" :key="item" :label="item" name="type"></el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-form-item>
      <el-form-item label="px2">
        <el-col :span="2">
          <el-select
            v-model="form.select2"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="20">
          <el-checkbox-group v-model="form.type2">
            <el-checkbox-button v-for="item in 12" :key="item" :label="item" name="type"></el-checkbox-button>
          </el-checkbox-group>
        </el-col>
      </el-form-item>
      <el-form-item
        v-for="(item,index) in form.dynamicItem"
        :key="index"
        :label="'px'+(index+3)"
      >
        <el-col :span="2">
          <el-select
            v-model="item.select"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option  v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="9">
          <el-checkbox-group v-model="item.type">
            <el-checkbox-button v-for="item in 12" :key="item" :label="item" name="type"></el-checkbox-button>
          </el-checkbox-group>
        </el-col>
        <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">立即创建</el-button>
        <el-button @click="addItem()" type="warning">增加一行</el-button>
        <el-button @click="resetForm('form')" type="danger">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "v-form",
  data() {
    return {
      form: {
        day: "",
        type: [],
        type1: [],
        type2: [],
        select1: "",
        select2: "",
        dynamicItem: [],
      },
      rules: {
        day: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  methods: {
    // 提交
    onSubmit() {
      // 如果没有选择就会报错
      if (this.form.day == "") {
        this.$message.error("请选择");
        return 0;
      }
      console.log("看", this.form);
      this.$emit("child-say", this.form); // 将数据传给父组件
      this.resetForm('form'); //提交成功后清除表单内容
      // 提交成功提示
      this.$message({
          message: '提交成功，请返回主页面查看',
          type: 'success'
        });
    },
    // 重置表单
    resetForm(form) {
      let type = [];
      this.$refs[form].resetFields();
      this.form.type1 = type;
      this.form.type2 = type;
      this.form.select1 = "";
      this.form.select2 = "";
      this.form.dynamicItem = type;
    },
    // 添加一行
    addItem() {
      if (this.form.dynamicItem.length > 2) {
        this.$message.error("最多五行");
      } else {
        this.form.dynamicItem.push({
          select: "",
          type: [],
        });
      }
    },
    // 删除一行
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.div1 {
  margin-top: 2px;
}
</style>
